<template>
  <div class="question" v-if="isRedoal">
    <div class="main" v-if="!show">
      <div class="typestaute">
        <div class="titlestyle">
          <div v-if="questionList.questionList[clickIndex].type == 1">单选</div>
          <div v-else-if="questionList.questionList[clickIndex].type == 2">
            多选
          </div>
          <div v-else>填空</div>
          <div class="cetertitle one_line">{{ questionList.title }}</div>
          <div>{{ clickIndex + 1 }}/{{ questionList.questionList.length }}</div>
        </div>

        <div class="mainstyle">
          {{ questionList.questionList[clickIndex].content }}
        </div>
        <div class="no-sliding">
          <div
            class="lasterstyle"
            v-if="questionList.questionList[clickIndex].type == 1"
          >
            <van-radio-group v-model="answerList[clickIndex].xuanxiangId">
              <div
                v-for="(i, index) in questionList.questionList[clickIndex]
                  .choiceList"
                :key="index"
                class="radiostyle"
              >
                <van-radio :name="i.choiceId" checked-color="orange">{{
                  i.choiceContent
                }}</van-radio>
              </div>
            </van-radio-group>
          </div>
          <div
            class="lasterstyle"
            v-else-if="questionList.questionList[clickIndex].type == 2"
          >
            <van-checkbox-group v-model="answerList[clickIndex].xuanxiangId">
              <div
                v-for="(i, index) in questionList.questionList[clickIndex]
                  .choiceList"
                :key="index"
                class="radiostyle"
              >
                <van-checkbox :name="i.choiceId" checked-color="orange"
                  >{{ i.choiceContent }}
                </van-checkbox>
              </div>
            </van-checkbox-group>
          </div>
          <div class="lasterstyle" v-else>
            <van-field
              type="textarea"
              autosize
              rows="2"
              style="border: 1px solid #ebedf0"
              placeholder="请输入内容"
              v-model="answerList[clickIndex].answer"
            >
            </van-field>
          </div>
        </div>
      </div>
      <div class="selectbut">
        <div>
          <van-button
            type="warning"
            round
            @click="LastQuestion"
            :disabled="disabled"
            style="background: orange; width: 130px; border: none"
            >上一题
          </van-button>
        </div>
        <div>
          <van-button
            type="warning"
            round
            @click="NextQuestion"
            v-if="statetype == true"
            style="background: orange; width: 130px; border: none"
            >下一题
          </van-button>
          <van-button
            type="warning"
            round
            @click="RightQuestion"
            v-if="statetype == false"
            style="width: 130px; background: orange; border: none"
            >完 成</van-button
          >
        </div>
      </div>
    </div>
    <van-popup
      v-model="show"
      round
      class="naire-content flex_tb_c"
      :close-on-click-overlay="true"
    >
      <div>{{ questionList.title }}</div>
      <div>{{ questionList.content }}</div>
      <div>结束时间： {{ questionList.endTime }}</div>
      <van-button
        type="warning"
        size="large"
        round
        @click="show = false"
        class="but"
        style="background: orange; border: none; margin: 20px auto"
        >现在开始</van-button
      >
    </van-popup>
  </div>
</template>

<script>
import { Toast } from "mint-ui";
import request from "@/utils/request";
import debounce from "@/utils/debounce.js"; //防抖
export default {
  data() {
    return {
      loading: false,
      finished: false,

      video: "",

      questionList: {},

      clickIndex: 0,
      answerList: [],
      checkList: [],
      textarea: "",
      statetype: true,
      disabled: true, //上一题禁止可用
      show: false,
      isRedoal: false,
      isFirst: window.sessionStorage.getItem("first"),
    };
  },
  created() {
    let userId = window.localStorage.getItem("userId");
    if (this.$route.params.time) {
      window.location.reload();
    } else {
      this.isRedoal = true;
    }
    this.video = JSON.parse(this.$route.query.row);
    this.getQuestion();
  },

  methods: {
    getQuestion() {
      request({
        url:
          "/generator/questionnaire/front/info?questionnaireId=" + this.video,
        method: "get",
      }).then((response) => {
        response.questionnaire.endTime = this.riqi(
          response.questionnaire.endTime * 1000
        );
        if (response.questionnaire.questionList.length == 1) {
          this.statetype = false;
        }
        response.questionnaire.questionList.forEach((item) => {
          console.log(item);
          if (item.type == 2) {
            this.answerList.push({
              questionId: item.id,
              answer: "",
              xuanxiangId: [],
            });
          } else {
            this.answerList.push({
              questionId: item.id,
              answer: "",
              xuanxiangId: "",
            });
          }
        });
        this.questionList = response.questionnaire;
        this.show = true;
      });
    },
    back() {
      this.$router.go(-1); //返回上一层
    },
    LastQuestion() {
      debounce(() => {
        console.log("触发");
        this.clickIndex--;
        const length = this.questionList.questionList.length - 1;
        if (this.clickIndex < length && this.clickIndex >= 0) {
          this.statetype = true;
          if (this.clickIndex == 0) {
            console.log("第一条无法选择");
            this.disabled = true;
          }
        } else if (this.clickIndex < 0) {
          this.clickIndex = 0;
        }
      }, 1000);
    },
    NextQuestion() {
      debounce(() => {
        console.log("触发");
        if (
          this.answerList[this.clickIndex].answer.length == 0 &&
          this.answerList[this.clickIndex].xuanxiangId.length == 0
        ) {
          Toast("请先完成当前题目！");
          return;
        }
        this.clickIndex++;
        this.disabled = false;
        const length = this.questionList.questionList.length - 1;
        if (this.clickIndex < length) {
        } else if (this.clickIndex >= length) {
          this.clickIndex = length;
          this.statetype = false;
        }
      }, 1000);
    },
    RightQuestion() {
      debounce(() => {
        console.log("触发");
        if (
          this.answerList[this.clickIndex].answer.length == 0 &&
          this.answerList[this.clickIndex].xuanxiangId.length == 0
        ) {
          Toast("请先完成当前题目！");
          return;
        }
        this.answerList.forEach((item, index) => {
          let single = item;
          if (single.xuanxiangId instanceof Array) {
            this.answerList.splice(index, 1);
            console.log(single);
            single.xuanxiangId.forEach((one, oidx) => {
              this.answerList.splice(index + oidx, 0, {
                questionId: single.questionId,
                answer: "",
                xuanxiangId: one,
              });
            });
          }
        });
        // return
        request({
          url:
            "/generator/answer/front/answersave?questionnaireId=" + this.video,
          method: "post",
          data: this.answerList,
        }).then((response) => {
          Toast({
            message: "感谢您的参与！",
            iconClass: "glyphicon glyphicon-ok",
          });
          if (this.isFirst == 0) {
            this.$router.replace({ name: "jumpGZH" });
          } else {
            this.$router.go(-1);
          }
        });
      }, 1000);
    }, //时间戳转日期
    add0(m) {
      return m < 10 ? "0" + m : m;
    },
    riqi(shijianchuo) {
      var time = new Date(shijianchuo);
      var y = time.getFullYear();
      var m = time.getMonth() + 1;
      var d = time.getDate();
      var h = time.getHours();
      var mm = time.getMinutes();
      var s = time.getSeconds();
      return (
        y +
        "-" +
        this.add0(m) +
        "-" +
        this.add0(d) +
        " " +
        this.add0(h) +
        ":" +
        this.add0(mm) +
        ":" +
        this.add0(s)
      );
    },
  },
};
</script>

<style>
.van-button[disabled] {
  background-color: rgb(174, 174, 174) !important;
}
.question {
  min-height: 100vh;
}
.naire-content {
  width: 80%;
  height: 60%;
  padding: 40px 24px;
  border-radius: 10px;
  border: #f8f8f8 solid 1px;
  box-shadow: #989898 4px 4px 7px -4px;
}
.naire-content > div {
  width: 100%;
  text-align: center;
  color: #9a9a9a;
}
.naire-content > div:nth-child(1) {
  font-size: 18px;
  font-weight: bold;
  color: #333;
}
.naire-content > div:nth-child(2) {
  letter-spacing: 1.5px;
  line-height: 20px;
}
.naire-content > div:nth-child(3) {
  font-size: 13px;
  color: #b6b6b6;
}
.topheader {
  width: 100%;
  background-color: black;
}

.Theadermain {
  height: 48px;
  display: flex;
  justify-content: space-between;
  color: #fff;
  align-items: center;
  width: 95%;
  margin: 0 auto;
}

.cetertitle {
  width: calc(100% - 124px);
  text-align: center;
  font-weight: bold;
}

.headerimg {
  width: 0.8rem;
  margin-left: 10px;
  transform: rotate(180deg);
}
/* .but{
	position: fixed;
	bottom: 10px;
	left: 0;
	top: 0;
	right: 0;
	margin: auto;
} */
.selectbut {
  padding: 15px;
  display: flex;
  justify-content: space-around;
  width: 100%;
  /* position: fixed;
		left: 0;
		bottom: 0; */
}

.main {
  /* border: 1px solid red; */
}

.titlestyle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  background: #f1f3f4;
}

.mainstyle {
  padding: 15px;
}

.lasterstyle {
  padding: 15px;
  width: 100%;
  /* height: 60vh; */
  /* overflow-y: scroll; */
  /* height: 500px; */
  /* border: 1px solid red; */
}

.radiostyle {
  width: 100%;
  padding: 20px 0;
}
.van-radio__label,
.van-checkbox__label {
  width: calc(100% - 30px);
  word-wrap: break-word;
}
</style>
